<template>
    <rui-page :defines="defines">
        <rui-query :label-width="200"
                   ref="searchForm"
                   :query="queryData"
                   :query-rows="searchFormOptions"
        />
        <rui-table
            :defineId="'voucherBuryingPointsDifine'"
            :fixedLeft="['action']"
            :showIndex="false"
            :select="false"
            :columns="buriedPointColumns"
            :slots="[{key:'action',slot:'action'}]"
            @loadDatas="queryData"
            ref-query="searchForm"
            ref="buriedPointTable"
        >
            <template slot="toolBar">
                <Button @click="add" icon="md-add" type="primary">新增</Button>
            </template>
            <template slot="action" slot-scope="{ row }">
                <div>
                    <Button @click="edit(row)" size="small" type="primary" v-if="row.status!='active'">编辑</Button>
                    <Button @click="view(row)" size="small" type="primary">查看</Button>
                    <Button type="error" size="small" @click="remove(row)" v-if="row.status!='active'">删除</Button>
                    <circleLoading v-if="operationLoading"/>
                </div>
            </template>
        </rui-table>
        <Modal v-model="isShowModel" :title="modelTitle" :width="1000" :closable="false"
               :mask-closable="false" @on-ok="buriedPointSubmit">
            <rui-form :form-options="buriedPointFormOptions" :read-only="false"
                      ref="buriedPointForm"></rui-form>
            <div slot="footer">
                <Button size="small" @click="isShowModel = false">取消</Button>
                <Button type="primary" size="small" :loading="submitLoading" @click="buriedPointSubmit" v-show="status!='view'">保存</Button>
            </div>
        </Modal>
    </rui-page>
</template>
<script>
    import voucherBuryingPointsDifine from "../defines/voucher-burying-point-define";
    import circleLoading from "_c/circle-loading/circle-loading.vue";
    import {deepClone} from "@/libs/utils/ObjectClone";
    import {
        listBuryingPoint,
        addVoucherBuryingPoint,
        modifyVoucherBuryingPoint,
        delVoucherBuryingPoint
    } from "@/projects/basic/api/contract/voucher/voucherBuryingPoint";

    export default {
        name: "product-buried-point-configuration",
        components: {
            circleLoading
        },
        data() {
            return {
                operationLoading: false,
                submitLoading: false,
                isShowModel: false,
                modelTitle: null,
                path:"contractAccount",
                status:null,
                searchFormOptions: [
                    {
                        defineId: "voucherBuryingPointsDifine",
                        span: 6,
                        fields: ["buriedPointNo", "buriedPointName", "buriedPointDescribe"]
                    },
                ],
                buriedPointColumns: [
                    'action', 'buriedPointNo', 'buriedPointName', 'buriedPointDescribe', 'createBy', 'createTime', 'updateBy', 'updateTime'
                ],
                buriedPointFormOptions: [{
                    grids: [
                        {defineId: "voucherBuryingPointsDifine",  span: 12, fields: [ "buriedPointNo","buriedPointName"]},
                        {defineId: "voucherBuryingPointsDifine", span: 12, fields: [ "buriedPointDescribe"]},
                    ]
                }]
            };
        },
        computed: {
            defines() {
                return [
                    {
                        id: "voucherBuryingPointsDifine",
                        fields: voucherBuryingPointsDifine
                    }
                ];
            }
        },
        methods: {
            queryData(queryData) {
                console.log(queryData);
                listBuryingPoint(queryData,this.path).then(res => {
                    if (res.code === "0000") {
                        let {records, total} = res.data;
                        this.$refs.buriedPointTable.updateTableData(records, total);
                    }
                });
            },
            refresh() {
                this.$refs['buriedPointTable'].reloadData();
            },
            add() {
                this.modalType = 0;
                this.modalTitle = "新增";
                this.isShowModel = true;
                this.status="new";
                this.$refs.buriedPointForm.setAllFieldRequired(true);
                this.$refs.buriedPointForm.setAllFieldReadOnly(false);
                this.$nextTick(() => {
                    this.$refs.buriedPointForm.resetFrom();
                })
            },
            edit(row) {
                this.modalType = 1;
                this.modalTitle = "编辑";
                this.status="edit";
                this.$refs.buriedPointForm.resetFrom();
                this.$refs.buriedPointForm.updateFormData(deepClone(row));
                this.$refs.buriedPointForm.setAllFieldReadOnly(false);
                this.isShowModel = true;
            },
            view(row) {
                this.$refs.buriedPointForm.resetFrom();
                this.status="view";
                this.$refs.buriedPointForm.updateFormData(deepClone(row));
                this.$refs.buriedPointForm.setAllFieldRequired(true);
                this.$refs.buriedPointForm.setAllFieldReadOnly(true);
                this.isShowModel = true;
            },
            buriedPointSubmit() {
                this.$refs.buriedPointForm.getForm().validate(valid => {
                    if (valid) {
                        if (this.modalType === 0) {
                            this.submitLoading = true;
                            addVoucherBuryingPoint(this.$refs.buriedPointForm.getFormData(),this.path)
                                .then(res => {
                                    this.submitLoading = false;
                                    if (res.code === "0000") {
                                        this.$Message.success("操作成功");
                                        this.isShowModel = false;
                                        this.refresh();
                                    }
                                }).catch(() => {
                                this.submitLoading = false;
                            });

                        } else {
                            // 编辑
                            this.submitLoading = true;
                            modifyVoucherBuryingPoint(this.$refs.buriedPointForm.getFormData(),this.path)
                                .then(res => {
                                    this.submitLoading = false;
                                    if (res.code === "0000") {
                                        this.$Message.success("操作成功");
                                        this.isShowModel = false;
                                        this.refresh();
                                    }
                                }).catch(() => {
                                this.submitLoading = false;
                            });
                        }
                    }
                });
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除埋点事件: " + v.buriedPointNo + " ?",
                    onOk: () => {
                        this.operationLoading = true;
                        delVoucherBuryingPoint(v.id,this.path).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.refresh();
                            }
                        }).catch(() => {
                            this.operationLoading = false;
                        });
                    }
                });
            },
        },
        mounted() {
            this.refresh();
        }
    };
</script>
